import { totalMonitorArticle } from '@/services/api/api-monitor-article';
import { PageContainer, ProForm, ProFormDatePicker, ProFormDateRangePicker, ProFormRadio, QueryFilter } from '@ant-design/pro-components';
import { useAccess, useModel } from '@umijs/max';
import { Card, Flex, FormInstance, Progress, Spin } from 'antd';
import moment from 'moment';
import { useEffect, useRef, useState } from 'react';

interface PageTotalArticleProps { }

const PageTotalArticle: React.FC<PageTotalArticleProps> = (props) => {
    const access = useAccess();
    const formRef = useRef<FormInstance>();


    const [totalData, setTotalData] = useState<MonitorArticleData.Statistics>()

    const getTotalData = async (dates) => {
        const res = await totalMonitorArticle({ dates })
        if (res.code === 0) {
            setTotalData(res.data)
        }
    }

    useEffect(() => {
        getTotalData([moment().subtract(6, 'days').format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")])
    }, [])

    return (
        <PageContainer
            header={{
                title: false,
                breadcrumb: {},
            }}
        >
            <QueryFilter
                submitter={false}
                span={24}
                labelWidth="auto"
                split
                formRef={formRef}
                initialValues={{
                    dateRange: [moment(), moment().subtract(6, 'days')],
                    time: '最近7天'
                }}
                onFinish={async (value) => {
                    console.log(value);
                    getTotalData(value.dateRange)
                }}
            >
                <ProForm.Group title="时间">
                    <ProFormRadio.Group
                        name="time"
                        radioType="button"
                        options={[
                            { label: '今天', value: '今天' },
                            { label: '本月', value: '本月' },
                            { label: '上月', value: '上月' },
                            { label: '最近7天', value: '最近7天' },
                            { label: '最近60天', value: '最近60天' },
                            { label: '最近90天', value: '最近90天' },
                        ]}
                        fieldProps={{
                            onChange: () => {
                                const time = formRef.current?.getFieldValue('time');
                                if (time === '今天') {
                                    formRef.current?.setFieldValue('dateRange', [moment(), moment()]);
                                } else if (time === '本月') {
                                    formRef.current?.setFieldValue('dateRange', [
                                        moment().startOf('month'),
                                        moment().endOf('month'),
                                    ]);
                                } else if (time === '上月') {
                                    formRef.current?.setFieldValue('dateRange', [
                                        moment().startOf('month').subtract(1, 'months'),
                                        moment().endOf('month').subtract(1, 'months'),
                                    ]);
                                } else if (time === '最近7天') {
                                    formRef.current?.setFieldValue('dateRange', [
                                        moment().subtract(6, 'days'),
                                        moment(),
                                    ]);
                                } else if (time === '最近60天') {
                                    formRef.current?.setFieldValue('dateRange', [
                                        moment().subtract(59, 'days'),
                                        moment(),
                                    ]);
                                } else if (time === '最近90天') {
                                    formRef.current?.setFieldValue('dateRange', [
                                        moment().subtract(89, 'days'),
                                        moment(),
                                    ]);
                                }
                                formRef.current?.submit();
                            },
                        }}
                    />
                    <ProFormDateRangePicker
                        name="dateRange"
                        fieldProps={{
                            onChange(dates, dateStrings) {
                                formRef.current?.submit();
                            },
                        }}
                    />
                </ProForm.Group>
            </QueryFilter>
            <Spin spinning={!totalData}>
                <Flex wrap justify={'space-between'} align={'center'} style={{ marginTop: 50, width: '44vw', paddingInline: 15 }} >
                    {/* <div>
                    <span style={{ marginRight: 30, fontWeight: 'bold', fontSize: '20px' }}>审核总稿件数量</span>
                    <Progress type="dashboard" percent={totalData.totalManuscripts} format={(percent) => `${percent}`} size={[200, 50]} strokeColor="#52C41A" strokeWidth={10} />
                </div>
                <div>
                    <span style={{ marginRight: 30, fontWeight: 'bold', fontSize: '20px' }}>问题稿件数量</span>
                    <Progress type="dashboard" percent={totalData.wrongManuscripts} size={[200, 50]} format={(percent) => `${percent}`} strokeColor="#FF5500" strokeWidth={10} />
                </div> */}

                    <Card title="审核总稿件数量" style={{ width: 300, }}>
                        <p style={{ display: 'flex', justifyContent: 'center', fontSize: 25, fontWeight: 'bold', color: '#1677ff' }}>{totalData?.total}</p>
                    </Card>
                    <Card title="问题总量" style={{ width: 300 }}>
                        <p style={{ display: 'flex', justifyContent: 'center', fontSize: 25, fontWeight: 'bold', color: '#1677ff' }}>{totalData?.violationCount}</p>
                    </Card>
                </Flex>
            </Spin>
        </PageContainer>
    );
};

export default PageTotalArticle;


